<template>
	<view>
		<view style="height: 6vh;">
			<u-navbar :isBack="false" :height="80" title="登录" :titleSize="60" title-color="#FFF"
				:background="{background:'linear-gradient(45deg,#c1db88,#afd37c)'}">
			</u-navbar>
		</view>
		<u-image src="/static/images/learn.png" style="width: 100vw; height: 20vh;" mode="aspectFit"></u-image>
		<u-form v-show="mode == 0" style="padding: 1vmax;">
			<u-form-item label="Phone" :label-width="500"
				style="border-bottom: 1px solid #CCC; border-radius: 0.3rem; padding: 20px;">
				<u-field type="text" placeholder="输入手机号" :fieldStyle="fieldStyle" :border-bottom="false"
					:clear-size="100" v-model="phone" ></u-field>
			</u-form-item>
			<u-form-item label="SmsCode" :label-width="500"
				style="border-bottom: 1px solid #CCC; border-radius: 0.3rem;padding: 20px;">
				<u-field type="text" placeholder="输入验证码" :fieldStyle="fieldStyle" :border-bottom="false"
					:clear-size="100" v-model="smsCode" >
					<template #right>
						<button style="font-size: 0.6rem;"   @click="OnClickGetSmsCode" >获取验证码</button>
					</template>
				</u-field>
			</u-form-item>
		</u-form>
		<u-form v-show="mode == 1" style="padding: 1vmax;">
			<u-form-item label="Phone" :label-width="500"
				style="border-bottom: 1px solid #CCC; border-radius: 0.3rem; padding: 20px;">
				<u-field type="text" placeholder="输入账号" :fieldStyle="fieldStyle" :border-bottom="false"
					:clear-size="100" v-model="username" ></u-field>
			</u-form-item>
			<u-form-item label="Password" :label-width="500"
				style="border-bottom: 1px solid #CCC; border-radius: 0.3rem;padding: 20px;">
				<u-field type="password" placeholder="输入密码" :fieldStyle="fieldStyle" :border-bottom="false"
					:clear-size="100" v-model="password" >
				</u-field>
			</u-form-item>
		</u-form>
		<view style="display: flex;width: 95vw;justify-content: space-between;">
			<view style="font-size: 0.6rem;color: #CCC;font-style: italic;margin-left: 30px;"
				@click="mode = mode == 1?0:1">
				{{mode == 0?'切换至账号密码登录':'切换至短信验证码登陆'}}
			</view>
			<view style="font-size: 0.6rem;color: #CCC;font-style: italic;margin-left: 30px;"  @click="onJump('/pages/personal/register')" >
				转至注册账号
			</view>
		</view>
		<view style="position: fixed;bottom: 100px;width: 100vw;display:flex;justify-content: center;">
			<u-button style="height: 5vh;font-size:0.7rem;width: 80vw;" type="success" shape="circle" @click="OnClickLogin" >Login</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 0
				, fieldStyle: {
					fontSize: '1rem'
					, lineHeight: '1rem'
				},
				phone:'',
				smsCode:'',
				username:'',
				password:''
			}
		}
		, methods: {
			onJump(path) {
				uni.navigateTo({
					url: path
				})
			},
			OnClickLogin(){
				switch(this.mode){
					case 0:this.$u.api.post_smsCode_login({mobile:this.phone,smsCode:this.smsCode}).then(res =>{
						this.$refs.uToast.show({
							title:res.msg,
							type:res.code == 200?'success':'error'
						})
						if(res.code == 200){
							this.$u.vuex('token',res.token);
							uni.switchTab({
								url:'/pages/service'
							})
						}
					});break;
					case 1:this.$u.api.post_login({username:this.username,password:this.password}).then(res =>{
						this.$refs.uToast.show({
							title:res.msg,
							type:res.code == 200?'success':'error'
						})
						if(res.code == 200){
							this.$u.vuex('token',res.token);
							uni.switchTab({
								url:'/pages/service'
							})
						}
					})
				}
			},
			OnClickGetSmsCode(){
				this.$u.api.get_smsCode_register({phoneNumber:this.phone}).then(res =>{
					this.$refs.uToast.show({title:`${res.msg}:${res.data}`,type:res.code == 200?'success':'error'})
				})
			}
		}
	}
</script>

<style>

</style>
